<template>
  <div style="margin-left:20px">
    <el-row>
      <el-col :span="12">
        <h3>一、时间选择器</h3>
        <div>
          <h4>1.1、固定时间点</h4>
          <el-time-select v-model="value" :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }" placeholder="选择时间">
          </el-time-select>
        </div>

        <div>
          <h4>1.2、任意时间点</h4>
          <el-time-picker v-model="value1" :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }" placeholder="任意时间点">
          </el-time-picker>
          <el-time-picker arrow-control v-model="value2" :picker-options="{
      selectableRange: '18:30:00 - 20:30:00'
    }" placeholder="任意时间点">
          </el-time-picker>
        </div>

        <div>
          <h4>1.3、固定时间范围</h4>
          <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30'
    }">
          </el-time-select>
          <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
      start: '08:30',
      step: '00:15',
      end: '18:30',
      minTime: startTime
    }">
          </el-time-select>
        </div>

        <div>
          <h4>1.4、固定时间范围</h4>
          <el-time-picker is-range v-model="value3" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
          <el-time-picker is-range arrow-control v-model="value4" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
          </el-time-picker>
        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、日期选择器</h3>
        <div>
          <h4>2.1、选择日</h4>
          <div class="block">
            <el-date-picker v-model="value5" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>

        <div style="margin-top:30px">
          <h4>2.2、选择日期范围，带快捷选项</h4>
          <div class="block">
            <el-date-picker v-model="value5" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="dateChange">
            </el-date-picker>
          </div>

        </div>

      </el-col>

    </el-row>

  </div>
</template>

<script>

export default {
  data () {
    return {
      value: '',

      value1: new Date(2016, 9, 10, 18, 40),
      value2: new Date(2016, 9, 10, 18, 40),
      startTime: '',
      endTime: '',
      value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],

      value5: '',
      value6: '',

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

    }
  },


  methods: {


    dateChange (val) {
      console.log(val)
    }
  }


}
</script>

<style scoped>
.line {
  border-left: 1px solid #9e9e9e;
  height: 1000px;
  margin-left: 8px;
}
</style>